<template>

    <el-dialog v-model="dialogVisible" 
    :title="requestParam.id==null||requestParam.id==''?'添加设置':'修改设置'" 
    width="30%">
        <el-form :model="requestParam" ref="form" label-position="top" label-width="80px">
            <el-scrollbar height="300px" class="box-body">
                <el-form-item label="分组编码" prop="groupCode">
                    <!-- <el-input size="large" v-model="requestParam.groupCode" placeholder="请输入分组编码"></el-input> -->
                    <el-select style="width: 100%;" v-model="requestParam.groupCode" placeholder="请选择分组编码">
                        <el-option v-for="item in groups" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="编码" prop="code">
                    <el-input size="large" v-model="requestParam.code" placeholder="请输入编码"></el-input>
                </el-form-item>

                <el-form-item label="名称" prop="name">
                    <el-input size="large" v-model="requestParam.name" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item label="值" prop="value">
                    <el-input size="large" v-model="requestParam.value" placeholder="请输入值"></el-input>
                </el-form-item>


                <el-form-item label="描述" prop="description">
                    <el-input size="large" type="textarea" v-model="requestParam.description"
                        placeholder="请输入描述"></el-input>
                </el-form-item>
            </el-scrollbar>

        </el-form>
        <div style="height: 20px;"></div>
        <span class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
        <div style="height: 20px;"></div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from 'vue';
import $kt from '@/vueKantboot';
import { ElMessage } from 'element-plus';

let dialogVisible = ref(false);

let groups = ref([{
    code: "1",
    name: "1"
}]);

let getGroups = () => {
    $kt.request.request({
        url: '/adminManage/system/settingGroup/getList',
        method: 'post',
        data: {},
    }).then((res: any) => {
        groups.value = res.data.data;
    });
}

getGroups();

let requestParam = ref({
    "id": "",
    "code": "", // 编码
    "groupCode": "", // 分组编码
    "name": "", // 名称
    "value": "", // 值
    "description": "" // 描述
});

let close = () => {
    dialogVisible.value = false;
}

let open = (item: any) => {
    if (item != null) {
        requestParam.value = JSON.parse(JSON.stringify(item));
    }else{
        requestParam.value = {
            "id": "",
            "code": "", // 编码
            "groupCode": "", // 分组编码
            "name": "", // 名称
            "value": "", // 值
            "description": "" // 描述
        };
    }
    dialogVisible.value = true;
}

const emits = defineEmits(["flush"]);
let submit = () => {

    if (requestParam.value.groupCode == '' || requestParam.value.groupCode == null) {
        ElMessage({
            message: '请选择分组编码',
            type: 'error',
        });
        return false;
    }

    if (requestParam.value.code == '' || requestParam.value.code == null) {
        ElMessage({
            message: '请输入编码',
            type: 'error',
        });
        return false;
    }

    if (requestParam.value.name == '' || requestParam.value.name == null) {
        ElMessage({
            message: '请输入名称',
            type: 'error',
        });
        return false;
    }

    if (requestParam.value.value == '' || requestParam.value.value == null) {
        ElMessage({
            message: '请输入值',
            type: 'error',
        });
        return false;
    }

    $kt.request.request({
        url: '/adminManage/system/setting/save',
        method: 'post',
        data: requestParam.value
    }).then((res: any) => {
        if (res.data.state != 2000) {
            ElMessage({
                message: res.data.errMsg,
                type: 'error',
            });
            return false;
        }
        ElMessage({
            message: res.data.msg,
            type: 'success',
        });



        close();
        emits("flush");
    });
}

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.dialog-footer {
    float: right;
}
</style>